<!DOCTYPE html>
<title>HTMLSelectMenuElement Test: value</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<selectmenu id="selectMenu0"></selectmenu>

<selectmenu id="selectMenu1">
  <option>one</option>
  <option>two</option>
  <div>I'm a div with no part attr</div>
  <option>three</option>
  <option>four</option>
</selectmenu>

<selectmenu id="selectMenu2">
  <div part="option">one</div>
  <div part="option">two</div>
  <div>I'm a div with no part attr</div>
  <div part="option">three</div>
  <div part="option">four</div>
</selectmenu>

<selectmenu id="selectMenu3">
  <div>I'm a div with no part attr</div>
  <option id="selectMenu3-child1">one</option>
  <div part="option" id="selectMenu3-child2">two</div>
  <option id="selectMenu3-child3">three</option>
</selectmenu>

<selectmenu id="selectMenu4">
  <div part="option" id="selectMenu4-child1">two</div>
  <div part="option" id="selectMenu4-child2">two</div>
</selectmenu>

<selectmenu id="selectMenu5">
  <div slot="button" part="button">
    <div part="selected-value" id="selectMenu5-custom-selected-value">Default custom selected-value text</div>
  </div>
  <option>one</option>
  <option>two</option>
</selectmenu>

<selectmenu id="selectMenu6">
  <div slot="button" part="button">
    <div part="selected-value" id="selectMenu6-custom-selected-value">Default custom selected-value text</div>
  </div>
  <popup slot="listbox" part="listbox">
    <option>one</option>
    <div part="option">two</div>
  </popup>
</selectmenu>

<script>

test(() => {
  const selectMenu0 = document.getElementById("selectMenu0");
  assert_equals(selectMenu0.value, "");
  selectMenu0.value = "something";
  assert_equals(selectMenu0.value, "", "Setting value should have no effect if there is no matching option");
}, "Test that HTMLSelectMenu with no options has empty string for value");

test(() => {
  const selectMenu1 = document.getElementById("selectMenu1");
  assert_equals(selectMenu1.value, "one", "value should start with the text of the first option part");

  selectMenu1.value = "three";
  assert_equals(selectMenu1.value, "three", "value can be set to the text of an option part");

  selectMenu1.value = "I'm a div with no part attr";
  assert_equals(selectMenu1.value, "three", "Setting value should have no effect if there is no matching option");
}, "Test value with HTMLOptionElement element option parts");

test(() => {
  const selectMenu2 = document.getElementById("selectMenu2");
  assert_equals(selectMenu2.value, "one", "value should start with the text of the first option part");

  selectMenu2.value = "three";
  assert_equals(selectMenu2.value, "three", "value can be set to the text of an option part");

  selectMenu2.value = "I'm a div with no part attr";
  assert_equals(selectMenu2.value, "three", "Setting value should have no effect if there is no matching option");
}, "Test value with non-HTMLOptionElement element option parts");

test(() => {
  const selectMenu3 = document.getElementById("selectMenu3");
  assert_equals(selectMenu3.value, "one", "value should start with the text of the first option part");

  document.getElementById("selectMenu3-child3").remove();
  assert_equals(selectMenu3.value, "one", "Removing a non-selected option should not change the value");

  document.getElementById("selectMenu3-child1").remove();
  assert_equals(selectMenu3.value, "two", "When the selected option is removed, the new first option should become selected");

  document.getElementById("selectMenu3-child2").remove();
  assert_equals(selectMenu3.value, "", "When all options are removed, value should be the empty string");
}, "Test that value is updated when options are removed");

test(() => {
  const selectMenu4 = document.getElementById("selectMenu4");
  assert_equals(selectMenu4.value, "one", "value should start with the text of the first option part");

  document.getElementById("selectMenu4-child1").setAttribute("part", "notOption");
  assert_equals(selectMenu4.value, "two", "Changing the part attribute of the selected option should remove its status as the selected option");
}, "Test that value is updated when the part attribute is removed");

test(() => {
  const selectMenu5 = document.getElementById("selectMenu5");
  let customSelectedValuePart = document.getElementById("selectMenu5-custom-selected-value");
  assert_equals(selectMenu5.value, "one", "value should start with the text of the first option part");
  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");

  selectMenu5.value = "two";
  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
}, "Test that slotted-in selected-value part is updated to value of selectmenu");

test(() => {
  const selectMenu6 = document.getElementById("selectMenu6");
  let customSelectedValuePart = document.getElementById("selectMenu6-custom-selected-value");
  assert_equals(selectMenu6.value, "one", "value should start with the text of the first option part");
  assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");

  selectMenu6.value = "two";
  assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
}, "Test that option parts in a slotted-in listbox are reflected in the value property");

</script>
